<template>
    <div>
        <div style="margin: 20px">
            <div style="margin-bottom: 20px">
                <a-row>
                    <a-col :span="11" offset="0">
                        <a-input-search placeholder="商品编号" @search="fetchData" v-model="searchData.goodsId"
                                        size="default">
                        </a-input-search>
                    </a-col>
                    <a-col :span="11" offset="1">
                        <a-input-search placeholder="订单编号"
                                        v-model="searchData.orderId"
                                        size="default"
                                        @search="fetchData"
                        >
                        </a-input-search>
                    </a-col>
                </a-row>
            </div>
            <a-form-model layout="inline" style="margin-bottom: 20px">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="评价类型：">
                            <a-radio-group name="commentTypeRadioGroup" @change="fetchData" :default-value="-1"
                                           v-model="searchData.type">
                                <a-radio :value="-1">
                                    全部
                                </a-radio>
                                <a-radio :value="1">
                                    好评
                                </a-radio>
                                <a-radio :value="2">
                                    中评
                                </a-radio>
                                <a-radio :value="3">
                                    差评
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="评价内容：">
                            <a-radio-group name="commentTypeRadioGroup" @change="fetchData" :default-value="-1"
                                           v-model="searchData.hasPicture">
                                <a-radio :value="-1">
                                    全部
                                </a-radio>
                                <a-radio :value="1">
                                    带图
                                </a-radio>
                                <a-radio :value="0">
                                    不带图
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="待处理：">
                            <a-select v-model="searchData.needExplain" @change="fetchData" :defaultValue="-1"
                                      style="width: 190px">
                                <a-select-option :value="-1">我都看</a-select-option>
                                <a-select-option :value="1">客观听我狡辩</a-select-option>
                                <a-select-option :value="2">这些我都狡辩完了</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-button style="color: #E2231A" @click="fetchData">搜索</a-button>
            </a-form-model>
        </div>
        <a-table :pagination="false" :columns="columns" :data-source="data">
            <span slot="username" slot-scope="text,record">
                {{record.anonymous&&record.anonymous===1?'匿名用户':record.username}}
            </span>
            <span slot="content" slot-scope="text,record">
                <span style="font-size: 13px">{{record.content}}</span>
            </span>
            <div slot-scope="text,record" slot="pictureList">
                <img v-for="pic in record.pictureList" :src="pic" style="width: 80px;height: 80px"
                     v-if="record.pictureList&&record.pictureList.length>0"/>
            </div>
            <span slot-scope="text,record" slot="type">
                <a-tag :color="record.type===1?'green':record.type===2?'orange':'gray'">{{record.type===1?'好评':record.type===2?'中评':record.type===3?'差评':''}}</a-tag>
            </span>
            <span slot-scope="text,record" slot="spec">
                <a style="font-size: 12px" @click="toDetail(record)">{{text}}</a>
            </span>
            <span slot-scope="text,record" slot="orderId">
                <a @click="toOrderCenter(record)">{{text}}</a>
            </span>
            <span slot-scope="text,record" slot="action">
                <a v-if="record.needExplain===1" @click="toCommentSinglePage(record)">去解释</a>
                <a  @click="toCommentSinglePage(record)">详情</a>
            </span>
            <span slot-scope="text,record" slot="createTime">
                <span style="font-size: 12px">{{record.createTime}}</span>
            </span>
        </a-table>
        <a-pagination style="float:right;" showQuickJumper v-model="pageMap.page" :page-size="pageMap.size"
                      :total="pageMap.total" @change="pageChange"/>

    </div>
</template>

<script>
    const columns = [
        {
            dataIndex: 'content',
            title: '内容',
            width: 400,
            scopedSlots: {customRender: 'content'},

        },
        {
            dataIndex: 'pictureList',
            title: '评价图片',
            width: 300,
            scopedSlots: {customRender: 'pictureList'},

        },
        {
            dataIndex: 'username',
            title: '用户',
            scopedSlots: {customRender: 'username'},

        },
        {
            dataIndex: 'orderId',
            title: '订单编号',
            scopedSlots: {customRender: 'orderId'}
        },
        {
            title: '商品',
            dataIndex: 'spec',
            width: 500,
            scopedSlots: {customRender: 'spec'},

        },
        {
            title: '评价类型',
            dataIndex: 'type',
            width:200,
            scopedSlots: {customRender: 'type'},
        },
        {
            title: '发布时间',
            dataIndex: 'createTime',
            width: 300,
            scopedSlots: {customRender: 'createTime'},

        },

        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
            width: 300
        },
    ];

    import commentApi from "../../../api/goods/commentApi";


    export default {
        name: "commentManager",
        data() {
            return {
                data: [],
                columns,
                searchData: {
                    goodsId: null,
                    orderId: null,
                    type: -1,
                    needExplain: -1

                },
                pageMap: {
                    page: 1,
                    size: 10,
                    total: 0
                }
            };
        },
        created() {
            this.fetchData();
        },

        methods: {
            fetchData() {
                commentApi.msComments(this.pageMap.page, this.pageMap.size, this.searchData).then(resp => {
                    if (resp.data.flag) {
                        this.data = resp.data.data.rows
                        this.pageMap.total = resp.data.data.total
                    }
                })
            },
            toDetail(item) {
                let uri = `/goodDetail?goodsInfo=${encodeURI(JSON.stringify({id: item.goodsId}))}`
                this.$router.push(encodeURI(uri))
            },
            toOrderCenter(item) {
                let uri = `/cell-center/order_index?orderId=${item.orderId}`
                this.$router.push(uri)
            },
            pageChange(page) {
                this.pageMap.page = page;
                this.fetchData()
            },
            /**
             * 到单个评论的详情页
             * @param record
             */
            toCommentSinglePage(record){
                let replyTo = {
                    id: record.id,
                    shopId: record.shopId,
                    username: record.username
                }
                let uri = `/comment-pub?replyTo=${encodeURI(JSON.stringify(replyTo))}`
                this.$router.push(encodeURI(uri))
            }
        }

    }
</script>

<style scoped>

</style>